import React from 'react'
//1. 导入 useState 函数
import { useState } from 'react'

export default function StateCom() {
  //2. 调用useState, 声明一个状态 参数可以为任意类型的值,  返回值是一个数组
  // count 用来接收状态的值,  setCount 用来接收修改状态的函数
  let [count, setCount] = useState(0);
  let [count2, setCount2] = useState(100);

  // 3. 声明一个函数
  let incre = () => {
    //传值的情况
    setCount(count + 1);
    //传入函数的情况
    setCount(v => {
      return v + 1;
    })
  } 
  //第二个按钮的点击事件
  let bothIncre = () => {
    //更新两个状态
    setCount(count + 1);
    setCount2(count2 + 1);
  }

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={incre}>新增</button>
      <h2>{count2}</h2>
      <button onClick={bothIncre}>两个都新增</button>
    </div>
  )
}
